<script setup lang="ts">
import Add from '@/components/icons/Add.vue';
import MyCommunityIcon from '@/components/icons/MyCommunityIcon.vue';
import { router } from '@/router';
const create = () => {
    router.push('/community/create');
}
</script>

<template>
    <div class="header">
        <div class="my">
            <MyCommunityIcon></MyCommunityIcon>
            <p style="font-weight: bold;">我的社区</p>
        </div>
        <div class="create">
            <van-button plain type="primary" :round="true" size="small" @click="create">
                创建社区
                <template #icon>
                    <div style="display: flex; align-items: center;">
                        <Add></Add>
                    </div>
                </template>
            </van-button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.header {
    display: flex;
    align-items: center;
    .my {
        width: 50%;
        display: flex;
        align-items: center;
    }
    .create {
        display: flex;
        width: 50%;
        justify-content: right;
    }
}
</style>